<template>
  <div class='my-send-wrap'>
     <v-header :userName="userNameHeader"></v-header>
    <el-form 
			ref="myBackoutForm"
			:rules="formRules"
		  style='margin-top:50px;overflow: hidden;'
		  :model="form"
			 label-width="21%">
    
      <el-form-item label="销假类型" prop='type'>
					<el-select class='start-date-short' disabled v-model="form.type" style='width:21.5%'>
          <el-option v-for='(k) in aTypeSelect' :value='k.confId' :label="k.name" :key="k.confId"></el-option>
        </el-select>
				
				<el-tooltip
						v-for='(k,i) in aTypeSelect'
						v-if='k.code_name == form.type'
						:content='k.comment'
						popper-class='tooltip'
					>
					<i class="help">?</i>
				</el-tooltip>
      </el-form-item>
   


      <el-form-item label="实际开始时间" prop='startDate'>
          <el-date-picker
						type="date"
            :clearable='false'
            @change='handleMessageBox("start")'
						v-model="form.startDate" 
            style="width: 21.5%"
            class='start-date-short'>
					</el-date-picker>
          <el-radio-group v-model="form.start"  style="margin-left:12px">
            <el-radio label="上午" ></el-radio>
            <el-radio label="下午" ></el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="实际结束时间" prop='endDate'>
          <el-date-picker
          @change='handleMessageBox("end")'
           :clearable='false'
					 format='yyyy-MM-dd' 
						style="width: 21.5%" type="date"
						 placeholder="选择日期" 
						 v-model="form.endDate"></el-date-picker>
          <el-radio-group v-model="form.end" style="margin-left:12px">
            <el-radio label="上午"></el-radio>
            <el-radio label="下午"></el-radio>
          </el-radio-group>
      </el-form-item>
       <el-form-item label="请假天数" prop = 'total'>
        <p v-if='form.startDate && form.endDate'>{{form.total}} 天 <span v-if='showTitle'>{{showTitle}}</span></p> 
        <p v-else>&nbsp;0.0&nbsp;天<span style='color:#999'>（系统将根据您的日期选择自动计算天数）</span><span v-if='showTitle'>{{showTitle}}</span></p>
        
       </el-form-item>
      <el-form-item
			 label="销假说明"
			 prop='reason'
			 >
        <el-input type="textarea"  v-model="form.reason" style="width:55%" :rows='3'></el-input>
      </el-form-item>
        
  
       
      <el-form-item
			prop='shenpiSelect'
			 label='审批流程'>
			 <el-dialog
          custom-class='dialog'
          :visible.sync="dialog2Visiable"
          top='2vh'
          lock-scroll
          @open='oldShenpi = form.shenpiSelect'
        > 
      <span slot="title" class="dialog-title">
         选择审批人
      </span>

      

      <el-row class="body" justify='space-between'>
        
        <el-col class="body-left" :span='12'>
            <el-row>
              <el-col :span='22'>
                <el-input
								 icon="search"
								 class="input" placeholder="搜索 拼音 名字 编号"
								 v-model='shenpiInput'
								 @keyup.enter.native='shenpiSearch'
								 :on-icon-click="shenpiSearch"></el-input>
              </el-col>
            </el-row>

					
						<section class="mianbao">

                    <el-tooltip popper-class='tooltip2' :content="getCcList2.fristDept && getCcList2.fristDept.descr" placement="top">
                      <p :style='mianbaoShowIf("b")?"":"overflow:visible"' @click.stop='sendBumenAjax2(getCcList2 && getCcList2.fristDept)'>{{getCcList2.fristDept && getCcList2.fristDept.descr}}</p>
                    </el-tooltip>

                    <span v-if='mianbaoShowIf("b")' class="el-icon-arrow-right"></span>
                    <el-tooltip v-if='mianbaoShowIf("b")' popper-class='tooltip2' :content="getCcList2.checkDept && getCcList2.checkDept.descr" placement="top">
                      <p>{{getCcList2.checkDept && getCcList2.checkDept.descr}}</p>
                    </el-tooltip>	
                    
                  </section>

            
                  <section class="bumen" v-if='getCcList2.deptList && getCcList2.deptList.length'>
							<p v-for='(k,i) in getCcList2.deptList' @click.stop='sendSecondBumenAjax2(k)' style='padding:0 4px'>
								<span>{{k.descr}}</span>
								<span class="el-icon-arrow-right" style='margin-top:12px'></span>
							</p>
						</section>
          
						<section class="checkbox" v-if='getCcList2'>
							<el-checkbox-group v-model.lazy='form.shenpiSelect'>
								<p v-for='(k,i) in getCcList2.empList' :key='i' style="padding:0">
									<el-checkbox :label='k.emplid'>{{k.name}}</el-checkbox><span style="font-size:12px;">&nbsp;&nbsp;{{k.emplid}}&nbsp;</span><span style="font-size:12px;" :title="k.dept_descr">({{k.dept_descr}})</span>
								</p>
							</el-checkbox-group> 
							
						</section>

       
        </el-col>

        <el-col class="body-right" :span='12'>
          <el-row class="body-right-title" tag='h2'>
            已选择审批人
          </el-row> 
         <el-row class="body-right-content" v-for='(k,i) in shenpi_com'>
           <el-row style='margin-top:4px'><el-col>{{k.name}}<span>({{k.emplid}})</span></el-col><el-col @click.native='form.shenpiSelect.splice(i,1)'>删除</el-col></el-row>
         </el-row>
     
        </el-col>
        
      </el-row>

      <div class="dialog-footer">
        <el-button @click.stop="dialog2Visiable = false" type="primary">确 定</el-button>
        <el-button @click.stop = "closeShenpi">取 消</el-button>
      </div>

    </el-dialog>
         <div class="shenheren">


            <ul>
              <li>
                <div>{{Name || '我'}}</div>
                <p>发起人</p>
                <span class="arrow">→</span>
              </li>

            

              <li v-for='(k,i) in shenpi_com'>
                <div class='blue' @click.stop='dialog2Visiable = true'>{{k.name}}</div>
                <p style='margin-left:-4px'>上级领导</p>
                <span class="arrow">→</span>
              </li> 


              <li>
                <div class='blue' @click.stop='dialog2Visiable = true'><i class='el-icon-plus'>
                </i></div>
								<p style='margin-left:-4px'>上级领导</p>
                <span class="arrow">→</span>
              </li>
              <li>
                <div>{{hrName}}</div>
                <p style='margin-left:-10px'>人力资源部</p>
              </li>

            </ul> 

          </div>

      </el-form-item>
       <form id="testFrom"
        :action="Axios.baseURI +''+ URL.sickLeave.url" 
        target="list" enctype="multipart/form-data" method="post" 
        onsubmit="return fileCountCheck(this);">

       </form>
       <iframe name="list" id="hidden_frame"></iframe> 

       <el-form-item label='知会人'>
		
				
				<ul class="zhihuiren">
					<li v-for='(k,i) in zhihuirenSelect'>
						<div>{{k.name}}</div>
						<p></p>
					</li>
					<li @click.stop="dialogVisiable=true">
						<div class='blue'><i class='el-icon-plus'></i></div>
						<p>添加</p>
					</li>
				</ul>
       

      </el-form-item> 
     
       <el-form-item label='选择文件'>
				<el-upload
						:action='Axios.baseURI+"/file/uploadFile?token="+token'
				 	 	 style='width:30%'
							multiple
						 :before-upload='beforeAvatarUpload'
						 :on-change='handlePreview'
						 :on-remove='handleUploadRemove'
						:file-list="fileList">
						<el-button size="small" type="primary">点击上传</el-button>
  					<div slot="tip" class="el-upload__tip">上传文件不能超过10MB</div>
				</el-upload>
			 </el-form-item>
      <el-form-item class="submit-item">
        <el-button type="primary" :disabled="submitDisabled" @click="onSubmit" >提交</el-button>
      </el-form-item>
    </el-form>
    
       
    <el-dialog
     
      custom-class='dialog'
      :visible.sync="dialogVisiable"
      top='2vh'
			lock-scroll
			@open='oldZhihuiren = zhihuirenSelect'

    > 
      <span slot="title" class="dialog-title">
         选择知会人
      </span>

      

      <el-row class="body" justify='space-between'>
        
        <el-col class="body-left" :span='12'>
            <el-row>
              <el-col :span='22'>
                <el-input
								 icon="search"
								 class="input" placeholder="搜索 拼音 名字 编号"
								 @keyup.enter.native='zhihuiSearch'
								 v-model='zhihuiInput'
								 :on-icon-click="zhihuiSearch"></el-input>
              </el-col>
            </el-row>

					
						<section class="mianbao">

                <el-tooltip popper-class='tooltip2' :content="getCcList.fristDept && getCcList.fristDept.descr" placement="top">
                  <p :style='mianbaoShowIf("a")?"":"overflow:visible"' @click.stop='sendBumenAjax(getCcList && getCcList.fristDept)'>{{getCcList.fristDept && getCcList.fristDept.descr}}</p>
                </el-tooltip>

                <span v-if='mianbaoShowIf("a")' class="el-icon-arrow-right" style="margin-top:4px"></span>
                <el-tooltip v-if='mianbaoShowIf("a")' popper-class='tooltip2' :content="getCcList.checkDept && getCcList.checkDept.descr" placement="top">
                  <p>{{getCcList.checkDept && getCcList.checkDept.descr}}</p>
                </el-tooltip>

              </section>

        
              <section class="bumen" v-if='getCcList.deptList && getCcList.deptList.length'>
							<p v-for='(k,i) in getCcList.deptList' @click.stop='sendSecondBumenAjax(k)'>
								<span>{{k.descr}}</span>
								<span class="el-icon-arrow-right"></span>
							</p>
						</section>

						<section class="checkbox" v-if='getCcList'>
							<el-checkbox-group v-model='zhihuirenSelect'>
								<p v-for='(k,i) in getCcList.empList' style="padding:7px 0">
									<el-checkbox :label='k'>{{k.name}}</el-checkbox><span style="font-size:12px;">&nbsp;&nbsp;{{k.emplid}}&nbsp;</span><span style="font-size:12px;" :title="k.dept_descr">({{k.dept_descr}})</span>
								</p>
							</el-checkbox-group> 
							
						</section>

       
        </el-col>

        <el-col class="body-right" :span='12'>
          <el-row class="body-right-title" tag='h2'>
            已选择知会人
          </el-row>     
         <el-row class="body-right-content" v-for='(k,i) in zhihuirenSelect'>
           <el-row><el-col>{{k.name}}<span>({{k.emplid}})</span></el-col><el-col @click.native='zhihuirenSelect.splice(i,1)'>删除</el-col></el-row>
         </el-row>
     
        </el-col>
        
      </el-row>

      <div class="dialog-footer">
        <el-button @click.stop="dialogVisiable = false" type="primary">确 定</el-button>
        <el-button @click.stop="closeZhihuiren">取 消</el-button>
      </div>

    </el-dialog>
		 
  </div>
</template>

<script>
import Vue from 'vue';
import {
  RadioGroup,
  Radio,
  DatePicker,
  Message,
  Tooltip,
  MessageBox,
  Pagination,
  Col,
  Row,
  Select,
  Option,
  Upload,
  Dialog,
  Tree,
  CheckboxGroup,
  Checkbox
} from 'element-ui';
Vue.use(CheckboxGroup);
Vue.use(Checkbox);
Vue.use(DatePicker);
Vue.use(Col);
Vue.use(Row);
Vue.use(Select);
Vue.use(Option);
Vue.use(Upload);
Vue.use(Dialog);
Vue.use(Tree);
Vue.use(Pagination);
Vue.use(Radio);
Vue.use(Tooltip);
Vue.use(RadioGroup);

import header from '@/components/employee/header';

export default {
  components: {
    'v-header': header
  },
  data() {
    const that = this;

    // var form_reason = (rule, value, callback) => {
    //   if (!value && value.trim() == "") {
    //     return callback(new Error("请填写销假事由"));
    //   } else {
    //     callback();
    //   }
    // };

    var form_startDate = (rule, value, callback) => {
        callback();
    };

    var form_endDate = (rule, value, callback) => {
        callback();
    };

    var leave_day = (rule, value, callback) => {
      if (!value || value === '0') {
        return callback(new Error('请假天数不能为零'));
      } else {
        callback();
      }
    };

    var form_shenpiSelect = (rule, value, callback) => {
      if (value.length == 0) {
        return callback(new Error('至少选择一位审批人'));
      }
      callback();
    };

    return {
      sickSubmitFlag: true,
      token: null,
      userNameHeader: localStorage.getItem('userName'),
      dialogVisiable: false,
      dialog2Visiable: false,
      defaultProps: {
        children: 'childList',
        label: 'descr'
      },
      dateTime: null,
      form: {
        type: '请选择',
        total: '',
        reason: '',
        start: '上午',
        end: '上午',
        startDate: '',
        endDate: '',
        shenpiSelect: []
      },
      formRules: {
        endDate: [{ required: false, validator: form_endDate, trigger: 'blur' }],
        startDate: [{ required: false, validator: form_startDate, trigger: 'blur' }],

        shenpiSelect: [
          { required: true, validator: form_shenpiSelect, trigger: 'change' }
        ],
        total: [{ required: true, validator: leave_day, trigger: 'change' }]
      },
      getCcList: {},
      getCcList2: {},
      flag: false,
      zhihuirenSelect: [],
      oldZhihuiren: [],
      oldShenpi: [],
      shenpiInput: null,
      fileList: [],
      myFileList: [],
      zhihuiInput: null,
      youxinShengyu: null,
      quanxinShengyu: null,
      qxendDate: null,
      hrName: null,
      submitDisabled: false,
      aTypeSelect: [],
      leave_day: 0,

      endSaveDate: '',
      endSaveSec: '',
      startSaveSec:'',
      startSaveDate:'',
      SaveDays: '',
      isReset: false,
      allEmplist:[],

      ids:null,
      Name:'',
      showTitle:''
    };
  },
  watch: {
    'dialog2Visiable'(newVal, oldVal){
        if (newVal) {
            this.getShenpiData();
        }
    },
    'dialogVisiable'(newVal, oldVal){
        if (newVal) {
            this.getZhihuirenData();
        }
    },

    'form.start'(newValue, oldValue) {
      if (this.form.startDate && this.form.endDate) {
        if (this.compareInputTime('start')) {
          this.handleSameDate();

        } else {
          this.form.total = '0';

        }
      }
    },
    'form.end'(newValue, oldValue) {
      if (this.form.startDate && this.form.endDate) {
        if (this.compareInputTime('end')) {
          this.handleSameDate();
          // this.singeCheck();
          // setTimeout(() => {
          //   this.$refs.mysendForm.validateField('yearCheck');
          // }, 1000);

        } else {
          this.form.total = '0';

        }
      }
    },
  },
  created(){
      this.ids = JSON.parse(localStorage.getItem('twoProcessId'));
      if (this.ids.name) {
          this.Name = this.ids.name;
      }
  },
  mounted() {
    this.token = localStorage.getItem('token');
    // this.getZhihuirenData();
    // this.getShenpiData();
    this.getHRName();
    this.getVacationDetail();
    this.getBusiID();
    this.getShenpi();
    
  
  },
  computed: {
    shenpi_com() {
      let result = [];

      if (this.allEmplist.length) {
        const list = this.allEmplist;

        for (let i = 0; i < list.length; i++) {
          for (let q = 0; q < list.length; q++) {
            if (i != q && list[i].emplid == list[q].emplid) {
              list.splice(i, 1);
              break;
            }
          }
        }
        if (this.form.shenpiSelect.length) {
          list.forEach((ele, index) => {
            if (this.form.shenpiSelect.includes(ele.emplid)) {
              result.push({ name: ele.name, emplid: ele.emplid });
            }
          });

          this.form.shenpiSelect.forEach((ele, i) => {
            result.forEach((element, index) => {
              if (element.emplid == ele) {
                let old = element;
                let xinindex = i;
                result[index] = result[xinindex];
                result[xinindex] = old;
              }
            });
          });
        }
      }

      



      return result;
    },

    startDate_com() {

      if (!this.form.startDate) {
          return ''
      }
      let date = new Date(this.form.startDate);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    },
    endDate_com() {
      if (!this.form.endDate) {
          return ''
      }
      let date = new Date(this.form.endDate);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    }
  },

  filters: {
      name: function(value) {
          if (value.length >= 3) {
            return value.substring(1, 3);
          }
          return value;
      }
  },
  methods: {
    getShenpi() {
        let params = {
            mainProcessId: this.ids.wfMainId
        };

        this.Axios.Post(this.URL.approvePerson.url, params).then(res => {
            const datas = res.data.datas;
            if (datas && datas.length) {
                datas.forEach(ele => {
                    this.form.shenpiSelect.push(ele.toExamineid);
                    this.allEmplist.push({
                            name:ele.toExamineName,
                            emplid: ele.toExamineid
                    })
                });
            }
        });
    },



    handleDisplayDate: function(val){
        if (val) {
              if (typeof val === 'string' && val.split(' ').length>1) {
                  return val.split(' ')[0]
              }
            var dataObj = new Date(val);   
            var year = dataObj.getFullYear();
            var month = dataObj.getMonth() + 1;
            month = month > 9 ? month : '0' + month;
            var day = dataObj.getDate();
            day = day > 9 ? day : '0' + day;
            return year + "-" + month + "-" + day 
        } else {
            return ''
        }
    },
    getBusiID() {


      
      console.log(localStorage.getItem('twoProcessId'),'twoProcessId');
      let paramsNew = {
        "subProcessId": this.ids.subId,
      }

      this.Axios
          .Post(this.URL.examineBydetails.url, paramsNew)
          .then(res => {
              this.res = res.data.datas;
              var wfBusinessProcessData = this.res.wfBusinessProcessData;
              
              this.showTitle = wfBusinessProcessData.showWorkingData;

              if (this.res) {
                  this.form.startDate = this.handleDisplayDate(wfBusinessProcessData.startTime);
                  this.form.endDate = this.handleDisplayDate(wfBusinessProcessData.endTime);
                  this.form.start = wfBusinessProcessData.startTimeHalfDaySign == 1 ? '上午' : '下午';
                  this.form.end = wfBusinessProcessData.endTimeHalfDaySign == 1 ? '上午' : '下午';
                  this.form.type = wfBusinessProcessData.processType;
                  this.leave_day = wfBusinessProcessData.leaveDay;

                  this.endSaveDate = this.form.endDate;
                  this.startSaveDate = this.form.startDate;
                  this.startSaveSec = this.form.start;
                  this.endSaveSec = this.form.end;
                  this.SaveDays = this.leave_day;
              }
          });


      // this.Axios.Post(this.URL.examineBydetailsForQJ.url, params).then(res => {
      //   let resData = res.data.datas;

      //   if (resData) {
      //     this.form.startDate = resData.start_time;
      //     this.form.endDate = resData.end_time;
      //     this.form.start = resData.Leave_st_section == 1 ? '上午' : '下午';
      //     this.form.end = resData.Leave_end_section == 1 ? '上午' : '下午';
      //     this.form.type = resData.leave_name;
      //     this.leave_day = parseFloat(resData.leave_day);

      //     this.endSaveDate = this.form.endDate;
      //     this.endSaveSec = this.form.end;
      //     this.SaveDays = this.leave_day;
      //   }
      // });
    },
    mianbaoShowIf(type) {
      if (type == 'a') {
        if (this.getCcList) {
          if (
            this.getCcList.fristDept && (this.getCcList.fristDept.descr !== this.getCcList.checkDept.descr)
          ) {
            return true;
          }
        }
        return false;
      } else {
        if (this.getCcList2) {
          if (
            this.getCcList2.fristDept && (this.getCcList2.fristDept.descr !== this.getCcList2.checkDept.descr)
          ) {
            return true;
          }
        }
        return false;
      }
    },

    getVacationDetail() {
      this.Axios.Post(this.URL.getLeaveInstruction.url).then(res => {
        let datas = res.data.datas;
        this.aTypeSelect = datas;
      });
    },

    handleSameDate() {
      if (this.startDate_com == this.endDate_com) {
        if (this.form.start == '下午' && this.form.end == '上午') {
          this.openMessage({
            info: '结束时间小于开始时间，已重置',
            type: 'warning'
          });

          [this.form.end, this.form.start] = ['下午', '上午'];
        }
      }

      this.handleMessageBox();
    },

    getHRName() {
      this.Axios.Post(this.URL.getHrName.url, { "fromKey": "HRkeepOnRecordSick"}).then(res => {
        if (res.data.status !== 1) {
          this.submitDisabled = true;
        }
        this.hrName = res.data.datas.toEmplName;
      });
    },

    closeShenpi() {
      this.form.shenpiSelect = this.oldShenpi;
      this.dialog2Visiable = false;
    },

    closeZhihuiren() {
      this.zhihuirenSelect = this.oldZhihuiren;
      this.dialogVisiable = false;
    },

    zhihuiSearch() {
      if (!this.zhihuiInput) {
        this.getZhihuirenData();
      } else {
        let params = {
          search: this.zhihuiInput,
          setid: this.getCcList.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;
          if (list && list.length) {
            this.getCcList.checkDept.descr = '搜索结果';
            this.getCcList.deptList = [];
            this.getCcList.empList = list;
          } else {
            Message({
              message: '此用户不存在，请重新搜索',
              type: 'error'
            });
          }
        });
      }
    },

    shenpiSearch() {
      if (!this.shenpiInput) {
        this.getShenpiData();
      } else {
        let params = {
          search: this.shenpiInput,
          setid: this.getCcList2.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;

          if (list && list.length) {
            let result = [];

            list.forEach(ele => {
              result.push({ emplid: ele.emplid, name: ele.name });
               this.allEmplist.push({ name: ele.name, emplid: ele.emplid });
            });

            this.getCcList2.checkDept.descr = '搜索结果';
            this.getCcList2.deptList = [];
            this.getCcList2.empList = result;

          

            for (let i = 0; i < this.allEmplist.length; i++) {
              for (let q = 0; q < this.allEmplist.length; q++) {
                if (
                  i != q &&
                  this.allEmplist[i].emplid == this.allEmplist[q].emplid
                ) {
                  this.allEmplist.splice(i, 1);
                  break;
                }
              }
            }


          } else {
            Message({
              message: '查无此人,请调整关键字,重新搜索',
              type: 'error'
            });
          }
        });
      }
    },

    handleUploadRemove(file, fileList) {
      let result = [];

      fileList.forEach((ele, index, arr) => {
        if (arr[index].response) {
          result.push(arr[index].response.datas[0]);
        }
      });

      this.myFileList = result;
    },
    handlePreview(file, fileList) {
      let result = [];

      fileList.forEach((ele, index, arr) => {
        if (arr[index].response) {
          result.push(arr[index].response.datas[0]);
        }
      });

      this.myFileList = result;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        Message.error('上传文件大小不能超过 10MB!');
      }
      return isLt2M;
    },

    sendSecondBumenAjax(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },

    sendBumenAjax(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    sendSecondBumenAjax2(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          empList: getCcList.empList,
          checkDept: getCcList.checkDept
        } = data);

        data.empList.forEach(ele => {
            this.allEmplist.push({ name: ele.name, emplid: ele.emplid });
        });

     
         for (let i = 0; i < this.allEmplist.length; i++) {
          for (let q = 0; q < this.allEmplist.length; q++) {
            if(i!=q && this.allEmplist[i].emplid == this.allEmplist[q].emplid){
              this.allEmplist.splice(i,1);
              break;
           }
          }
        }


      });
    },

    sendBumenAjax2(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },

    getZhihuirenData() {
      this.Axios.Post(this.URL.getCcList.url).then(
        res =>{
          this.getCcList = res.data.datas;
          !this.getCcList.checkDept && (this.getCcList.checkDept = {})
          !this.getCcList.fristDept && (this.getCcList.fristDept = {})
        } 
      );
    },
    getShenpiData() {
      this.Axios.Post(this.URL.getCcList.url).then(res => {
        this.getCcList2 = res.data.datas;
        let result = [];
        !this.getCcList2.checkDept && (this.getCcList2.checkDept = {})
        !this.getCcList2.fristDept && (this.getCcList2.fristDept = {})

        this.getCcList2.empList.forEach(ele => {
          result.push({ name: ele.name, emplid: ele.emplid,dept_descr:ele.dept_descr });
          this.allEmplist.push({ name: ele.name, emplid: ele.emplid });

        });

        this.getCcList2.empList = result;
      });
    },

    onSubmit() {
      if (this.$refs['myBackoutForm']) {
        this.$refs['myBackoutForm'].validate(valid => {
          if (valid) {
            MessageBox.confirm('是否确认提交', '提示', {
              confirmButtonText: '确定?',
              cancelButtonText: '取消'
            })
              .then(() => {
                // let params = {
                //   fromEmplid: '', //提交人id
                //   fromIdea: '',
                //   toIdea: '',
                //   actId: '',
                //   actName: '',
                //   toEmplid: '',
                //   leaveName: this.form.type, //请假类型
                //   startTime: this.startDate_com, //开始时间
                //   endTime: this.endDate_com, //结束时间
                //   leaveReason: this.form.reason, //请假原因
                //   leaveStSection: this.form.start, //1请假结束时间上午 2请假结束时间下午
                //   leaveEndSection: this.form.end,
                //   auditorId: '', //审批人
                //   atts: this.myFileList.toString(),
                //   leaveDay: this.form.total,
                //   surplusQX: this.quanxinShengyu
                // };





 



                var annexNexusBeansList = [];
                this.myFileList.forEach((val,index)=>{
                    annexNexusBeansList.push({
                      "annexId": val
                    })
                })

                
                var toExamineBeans = [];
                if (this.form.shenpiSelect.length) {
                    this.shenpi_com.forEach((ele,index)=>{
                        toExamineBeans.push({
                          "toExamineid": ele.emplid,
                          "toExamineName":ele.name
                        })                      
                    })
                    // params.auditorId = this.form.shenpiSelect.join(',');
                }


                var copySendBeans = [];
                if (this.zhihuirenSelect.length) {
                    let strings = '';
                    this.zhihuirenSelect.forEach((ele, index, arr) => {
                        copySendBeans.push(                    {
                          "toEmplName": ele.name,
                          "toEmplid": ele.emplid
                        })
                    });
                }


                var firstYear = '';
                // if (this.form.type == '001001') {
                //     params.years = [];
                //     this.form.yearCheck.forEach((ele, i, arr) => {
                //         params.years.push(arr[i].year);
                //     });

                //     var arrYearStr = params.years.join(',');
                //     params.years = arrYearStr;
                    
                // } 


                console.log(toExamineBeans,copySendBeans,'test')
                
                var params = {
                  "annexNexusBeans": this.myFileList,
                  "copySendBeans": copySendBeans,
                  "endTime": this.alterUTC(this.endDate_com),
                  "endTimeHalfDaySign": this.form.end == '上午' ? '1' : '2',
                  "fromIdea": "string",
                  "leaveDay": this.form.total,
                  "firstYear":firstYear,
                  "leaveReason": this.form.reason,
                  "processType": '001081',
                  "startTime": this.alterUTC(this.startDate_com),
                  "startTimeHalfDaySign": this.form.start == '上午' ? '1' : '2',
                  "toExamineBeans": toExamineBeans,
                  "mainProcessId":this.ids.wfMainId
                }

// this.form.type
                this.Axios.Post(this.URL.vacationInitiation.url, params).then(
                  res => {
                  if (res.data.status == 1) {
                    Message({
                      type: 'success',
                      message: '提交成功'
                    });
                    this.$router.push({
                      path: '/requestVacation',
                      query: { activeName: 'c' }
                    });
                  } 
                });

                //              this.uploadFrom(params);
              })
              .catch(() => {});

            return false;
          } else {
            window.scrollTo(0, 40);

            return false;
          }
        });
      }
    },

    uploadFrom: function(params) {
      var self = this;

      var form = document.getElementById('testFrom');
      form.innerHTML = '';
      let token = localStorage.getItem('token');
      params.token = token;
      Object.keys(params).forEach(function(val, index) {
        var input = document.createElement('input');
        input.name = val;
        //      		input.value = JSON.stringify(params[val]);
        input.value = params[val];

        input.style.display = 'none';
        form.appendChild(input);
      });

      var iframeWin = document.getElementById('hidden_frame');

      if (iframeWin.attachEvent) {
        iframeWin.attachEvent('load', function() {
          if (document.all) {
            //IE
            var sub_con = document.frames['hidden_frame'].document;
          } else {
            //Firefox
            var sub_con = document.getElementById('hidden_frame')
              .contentDocument;
          }
          var textBody =
            sub_con.getElementsByTagName('message')[0].innerHTML ||
            sub_con.getElementsByTagName('message')[0].innerText ||
            sub_con.getElementsByTagName('message')[0].childNodes[0].nodeValue; //取得返回值
          var patt1 = new RegExp('成功');
          var result = patt1.test(textBody);
          if (result) {
            Message({
              type: 'success',
              message: '提交成功'
            });
            self.$router.push({
              path: '/requestVacation',
              query: { activeName: 'c' }
            });
          } else {
            Message({
              type: 'error',
              message: textBody || '提交失败'
            });
          }
        });
      } else {
        iframeWin.onload = iframeWin.onreadystatechange = function() {
          if (document.all) {
            //IE
            var sub_con = document.frames['hidden_frame'].document;
          } else {
            //Firefox
            var sub_con = document.getElementById('hidden_frame')
              .contentDocument;
          }

          var textBody =
            sub_con.getElementsByTagName('message')[0].innerHTML ||
            sub_con.getElementsByTagName('message')[0].innerText ||
            sub_con.getElementsByTagName('message')[0].childNodes[0].nodeValue; //取得返回值
          var patt1 = new RegExp('成功');
          var result = patt1.test(textBody);

          if (result) {
            Message({
              type: 'success',
              message: '提交成功'
            });
            self.$router.push({
              path: '/requestVacation',
              query: { activeName: 'c' }
            });
          } else {
            Message({
              type: 'error',
              message: textBody || '提交失败'
            });
          }
        };
      }

      form.submit();
    },

    alterUTC:function(val){

        // return (new Date(val)).toUTCString();

        var date = new Date(val);
        var y =  date.getUTCFullYear();    
        var m = date.getUTCMonth() ;
        var d = date.getUTCDate();
        // var h= date.getUTCHours();
        // var M = date.getUTCMinutes();
        // var s = date.getUTCSeconds();
        var utc = Date.UTC(y,m,d,0,0,0);
        return utc;
    },

    updateDays(){
        let params = {
            "endTime": this.alterUTC(this.endDate_com),
            "endTimeHalfDaySign": this.form.end == '上午' ? '1' : '2',
            "startTime": this.alterUTC(this.startDate_com),
            "startTimeHalfDaySign":this.form.start == '上午' ? '1' : '2',
            'confId':this.form.type
        }


        this.Axios.Post(this.URL.leaveBydays.url, params).then(res => {
          this.form.total = parseFloat(res.data.datas.effeLeaveDay);
          this.showTitle = res.data.datas.showWorkingData ? res.data.datas.showWorkingData : '';
        });
    },

    handleMessageBox(type) {
      if (!this.compareInputTime(type) || this.isReset) {
        return;
      }
      // let params = {
      //   startTime: this.startDate_com,
      //   leaveStSection: this.form.start,
      //   endTime: this.endDate_com,
      //   leaveEndSection: this.form.end
      // };

      // params.leaveStSection = params.leaveStSection == '上午' ? '1' : '2';
      // params.leaveEndSection = params.leaveEndSection == '上午' ? '1' : '2';

      // this.Axios.Post(this.URL.leaveBydays.url, params).then(res => {
      //   this.form.total = parseFloat(res.data.datas.days);
      // });

        this.updateDays();
    },

    compareInputTime: function(type) {
      var startDate = this.startDate_com;
      var endDate = this.endDate_com;
      // if (!startDate && !endDate) {
      //     Message({
      //       type: 'warning',
      //       message: '请至少输入开始或者结束时间'
      //     });
      //     return false;
      // } else if (!startDate || !endDate) {
      //     this.start
      //     console.log(startDate,endDate,'endDate')
      //     return false;
      // }
      var endSaveTime = this.endSaveDate;
      var startSaveTime = this.startSaveDate;

      console.log(this.startDate_com,'this.startDate_com');

      if (startDate === endDate) {
        var startSec = this.form.start;
        var endSec = this.form.end;
        if (startSec === '下午') {
          if (endSec === '上午') {
            if (type === 'start') {
              Message({
                type: 'warning',
                message: '开始时间大于结束时间，已重置'
              });

              //              this.form.endTime = this.endSaveTime;
              this.isReset = true;
              Vue.nextTick(() => {
                this.isReset = false;
              });
              this.form.startDate = this.startSaveDate;
              this.form.start = this.startSaveSec;
              this.updateDays();
              return true;

            } else {
              Message({
                type: 'warning',
                message: '结束时间小于开始时间，已重置'
              });

              //              this.form.endTime = this.endSaveTime;
              this.isReset = true;
              Vue.nextTick(() => {
                this.isReset = false;
              });
              this.form.endDate = this.endSaveDate;
              this.form.end = this.endSaveSec;
              this.form.total = this.SaveDays;
              this.updateDays();
              return true;
            }
          }
        }
      } else {
        if (!this.compareTime(startDate, endDate)) {
          if (type === 'start') {
              Message({
                type: 'warning',
                message: '开始时间大于结束时间，已重置'
              });

              //              this.form.endTime = this.endSaveTime;
              this.isReset = true;
              Vue.nextTick(() => {
                this.isReset = false;
              });
              this.form.startDate = this.startSaveDate;
              this.form.start = this.startSaveSec;
              this.updateDays();
              return true;
          } else {
            Message({
              type: 'warning',
              message: '结束时间小于开始时间，已重置'
            });
            this.isReset = true;
            Vue.nextTick(() => {
              this.isReset = false;
            });
            this.form.endDate = this.endSaveDate;
            this.form.end = this.endSaveSec;
            this.form.total = this.SaveDays;
            this.updateDays();
            return true;
          }
        }
      }

      if (type === 'start') {
          if (startSaveTime === startDate) {
              var startSec = this.form.start;
              var endSec = this.form.end;
              if (startSec === "下午") {
                if (endSec === "上午") {
                  if (type === 'start') {
                        Message({
                          type: 'warning',
                          message: '实际开始时间超出请假开始时间，已重置'
                        });

                        //              this.form.endTime = this.endSaveTime;
                        this.isReset = true;
                        Vue.nextTick(() => {
                          this.isReset = false;
                        });
                        this.form.startDate = this.startSaveDate;
                        this.form.start = this.startSaveSec;  
                        this.updateDays();
                        return true;               
                  } else {

                  }
                
                }
              }
          } else {
              if (!this.compareTime(startSaveTime, startDate)) {
                  if (type === 'start') {
                        Message({
                          type: 'warning',
                          message: '实际开始时间超出请假开始时间，已重置'
                        });

                        //              this.form.endTime = this.endSaveTime;
                        this.isReset = true;
                        Vue.nextTick(() => {
                          this.isReset = false;
                        });
                        this.form.startDate = this.startSaveDate;
                        this.form.start = this.startSaveSec;   
                        this.updateDays();
                        return true;
                  } else {

                  }
              }
          }
      }



      if (type === 'end') {
        if (endSaveTime === endDate) {
          var startSec = this.form.end;
          var endSec = this.endSaveSec;
          if (startSec === '下午') {
            if (endSec === '上午') {
              if (type === 'start') {
              } else {
                Message({
                  type: 'warning',
                  message: '实际结束时间超出请假结束时间，已重置'
                });
                this.isReset = true;
                Vue.nextTick(() => {
                  this.isReset = false;
                });
                this.form.endDate = this.endSaveDate;
                this.form.end = this.endSaveSec;
                this.form.total = this.SaveDays;
                this.updateDays();
                return true;
              }
            }
          }
        } else {
          if (!this.compareTime(endDate, endSaveTime)) {
            if (type === 'start') {
              this.form.endTime = this.form.startTime.split(' ')[0] + ' 下午';
            } else {
              Message({
                type: 'warning',
                message: '实际结束时间超出请假结束时间，已重置'
              });
              this.isReset = true;
              Vue.nextTick(() => {
                this.isReset = false;
              });
              this.form.endDate = this.endSaveDate;
              this.form.end = this.endSaveSec;
              this.form.total = this.SaveDays;
              this.updateDays();
              return true;
            }
          }
        }
      }


      return true;
    },
    compareTime: function(startDate, endDate) {
      if (!startDate || !endDate) {
        return false;
      }
      return new Date(startDate) - new Date(endDate) < 0;

    },
  
    handleIconClick() {
      let params = {
        name: this.shenheInput
      };

      this.Axios.Post(this.URL.leaveApprovalBylist.url, params).then(res => {
        this.shenpi = res.data.datas;
      });
    }
  }
};
</script>


<style>
@charset "UTF-8";
.el-upload-cover__title,
.el-upload-list__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-progress-bar__inner:after,
.el-upload-cover:after,
.el-upload-list--picture-card .el-upload-list__item-actions:after {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}
.el-progress {
  position: relative;
  line-height: 1;
}
.el-progress.is-exception .el-progress-bar__inner {
  background-color: #ff4949;
}
.el-progress.is-exception .el-progress__text {
  color: #ff4949;
}
.el-progress.is-success .el-progress-bar__inner {
  background-color: #13ce66;
}
.el-progress.is-success .el-progress__text {
  color: #13ce66;
}
.el-progress__text {
  font-size: 14px;
  color: #48576a;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  line-height: 1;
}
.el-progress__text i {
  vertical-align: middle;
  display: block;
}
.el-progress--circle {
  display: inline-block;
}
.el-progress--circle .el-progress__text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.el-progress--circle .el-progress__text i {
  vertical-align: middle;
  display: inline-block;
}
.el-progress--without-text .el-progress__text {
  display: none;
}
.el-progress--without-text .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
  display: block;
}
.el-progress--text-inside .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
}
.el-progress-bar {
  padding-right: 50px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-right: -55px;
  box-sizing: border-box;
}
.el-progress-bar__outer {
  height: 6px;
  border-radius: 100px;
  background-color: #e4e8f1;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.el-progress-bar__inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #20a0ff;
  text-align: right;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
}
.el-progress-bar__innerText {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
}
@keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 32px 0;
  }
}
.el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload iframe {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
.el-upload__input {
  display: none;
}
.el-upload__tip {
  font-size: 12px;
  color: #8391a5;
  margin-top: 7px;
}
.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.el-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
}
.el-upload--picture-card:hover {
  border-color: #20a0ff;
  color: #20a0ff;
}
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload-dragger .el-upload__text {
  color: #97a8be;
  font-size: 14px;
  text-align: center;
}
.el-upload-dragger .el-upload__text em {
  color: #20a0ff;
  font-style: normal;
}
.el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #97a8be;
  margin: 40px 0 16px;
  line-height: 50px;
}
.el-upload-dragger + .el-upload__tip {
  text-align: center;
}
.el-upload-dragger ~ .el-upload__files {
  border-top: 1px solid rgba(191, 203, 217, 0.2);
  margin-top: 7px;
  padding-top: 5px;
}
.el-upload-dragger:hover {
  border-color: #20a0ff;
}
.el-upload-dragger.is-dragover {
  background-color: rgba(32, 159, 255, 0.06);
  border: 2px dashed #20a0ff;
}
.el-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-upload-list.is-disabled
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  display: block;
}
.el-upload-list__item {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  font-size: 14px;
  color: #48576a;
  line-height: 1.8;
  margin-top: 5px;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  position: relative;
}
.el-upload-list__item .el-progress-bar {
  margin-right: 0;
  padding-right: 0;
}
.el-upload-list__item .el-progress {
  position: absolute;
  top: 20px;
  width: 100%;
}
.el-upload-list__item .el-progress__text {
  position: absolute;
  top: -13px;
  right: 0;
}
.el-upload-list__item:first-child {
  margin-top: 10px;
}
.el-upload-list__item .el-icon-upload-success {
  color: #13ce66;
}
.el-upload-list__item .el-icon-close {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  opacity: 0.75;
  color: #48576a;
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}
.el-upload-list__item .el-icon-close:hover {
  opacity: 1;
}
.el-upload-list__item:hover {
  background-color: #eef1f6;
}
.el-upload-list__item:hover .el-icon-close {
  display: inline-block;
}
.el-upload-list__item:hover .el-progress__text {
  display: none;
}
.el-upload-list__item.is-success .el-upload-list__item-status-label {
  display: block;
}
.el-upload-list__item.is-success .el-upload-list__item-name:hover {
  color: #20a0ff;
  cursor: pointer;
}
.el-upload-list__item.is-success:hover .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list__item-name {
  color: #48576a;
  display: block;
  margin-right: 40px;
  padding-left: 4px;
  transition: color 0.3s;
}
.el-upload-list__item-name [class^='el-icon'] {
  color: #97a8be;
  margin-right: 7px;
  height: 100%;
  line-height: inherit;
}
.el-upload-list__item-status-label {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
  display: none;
}
.el-upload-list__item-delete {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 12px;
  color: #48576a;
  display: none;
}
.el-upload-list__item-delete:hover {
  color: #20a0ff;
}
.el-upload-list--picture-card {
  margin: 0;
  display: inline;
  vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
.el-upload-list--picture-card .el-upload-list__item .el-icon-check,
.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  color: #fff;
}
.el-upload-list--picture-card .el-upload-list__item .el-icon-close,
.el-upload-list--picture-card
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  display: block;
}
.el-upload-list--picture-card .el-upload-list__item-name {
  display: none;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
}
.el-upload-list--picture-card .el-upload-list__item-status-label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.el-upload-list--picture-card .el-upload-list__item-status-label i {
  font-size: 12px;
  margin-top: 11px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload-list--picture-card .el-upload-list__item-actions span {
  display: none;
  cursor: pointer;
}
.el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 15px;
}
.el-upload-list--picture-card
  .el-upload-list__item-actions
  .el-upload-list__item-delete {
  position: static;
  font-size: inherit;
  color: inherit;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  display: inline-block;
}
.el-upload-list--picture-card .el-progress {
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 126px;
}
.el-upload-list--picture-card .el-progress .el-progress__text {
  top: 50%;
}
.el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
}
.el-upload-list--picture .el-upload-list__item .el-icon-check,
.el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  color: #fff;
}
.el-upload-list--picture
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  background: 0 0;
  box-shadow: none;
  top: -2px;
  right: -12px;
}
.el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  display: block;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name {
  line-height: 70px;
  margin-top: 0;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name
  i {
  display: none;
}
.el-upload-list--picture .el-upload-list__item-thumbnail {
  vertical-align: middle;
  display: inline-block;
  width: 70px;
  height: 70px;
  float: left;
  position: relative;
  z-index: 1;
  margin-left: -80px;
}
.el-upload-list--picture .el-upload-list__item-name {
  display: block;
  margin-top: 20px;
}
.el-upload-list--picture .el-upload-list__item-name i {
  font-size: 70px;
  line-height: 1;
  position: absolute;
  left: 9px;
  top: 10px;
}
.el-upload-list--picture .el-upload-list__item-status-label {
  position: absolute;
  right: -17px;
  top: -7px;
  width: 46px;
  height: 26px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 1px 1px #ccc;
}
.el-upload-list--picture .el-upload-list__item-status-label i {
  font-size: 12px;
  margin-top: 12px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
}
.el-upload-list--picture .el-progress {
  position: relative;
  top: -7px;
}
.el-upload-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  cursor: default;
}
.el-upload-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.el-upload-cover + .el-upload__inner {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.el-upload-cover__label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.el-upload-cover__label i {
  font-size: 12px;
  margin-top: 11px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
  color: #fff;
}
.el-upload-cover__progress {
  display: inline-block;
  vertical-align: middle;
  position: static;
  width: 243px;
}
.el-upload-cover__progress + .el-upload__inner {
  opacity: 0;
}
.el-upload-cover__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-upload-cover__interact {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.72);
  text-align: center;
}
.el-upload-cover__interact .btn {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  margin-top: 60px;
}
.el-upload-cover__interact .btn span {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.el-upload-cover__interact .btn:not(:first-child) {
  margin-left: 35px;
}
.el-upload-cover__interact .btn:hover {
  -ms-transform: translateY(-13px);
  transform: translateY(-13px);
}
.el-upload-cover__interact .btn:hover span {
  opacity: 1;
}
.el-upload-cover__interact .btn i {
  color: #fff;
  display: block;
  font-size: 24px;
  line-height: inherit;
  margin: 0 auto 5px;
}
.el-upload-cover__title {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  height: 36px;
  width: 100%;
  font-weight: 400;
  text-align: left;
  padding: 0 10px;
  margin: 0;
  line-height: 36px;
  font-size: 14px;
  color: #48576a;
}
</style>



<style lang='less'>
.start-date-short {
  .el-input__inner {
    width: 100% !important;
  }
}
.my-send-wrap .el-upload__input {
  display: none;
}

.submit-item {
  padding-bottom: 20px;

  margin-top: 50px;
  .el-button {
    position: absolute;
    top: -20px;
    left: 20%;
    transform: scale(1.1) translateX(-70%);
  }
}
input[disabled],
input:disabled {
  border: 1px solid #fff;
  background-color: #fff;
  color: #aca899;
  width: 26px;
}
.tooltip {
  max-width: 400px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}

.tooltip2 {
  background-color: #38f !important;

  .popper__arrow {
    border-top-color: #38f !important;
  }
  .popper__arrow::after {
    border-top-color: #38f !important;
    border-bottom-color: #38f !important;
  }
}

iframe {
  display: none;
}

.help {
  display: inline-block;
  background-color: #89abc6;

  font-size: 14px;

  border-radius: 50%;

  height: 16px;

  line-height: 16px;

  width: 16px;

  margin-left: 10px;

  color: #fff;

  cursor: pointer;

  font-style: normal;
  text-align: center;
}
#testFrom {
  display: none;
  width: 65%;
  margin: 15px auto 32px auto;
  position: relative;

  .elbtn {
    position: absolute;
    left: 5%;
    top: 6px;
    margin-left: 2px;
    cursor: pointer;
  }

  label {
    font-size: 14px;
    color: #48576a;
  }
  input {
    display: none;
  }
  .file-item {
    line-height: 40px;
  }
  .file-item span {
    display: inline-block;
    margin-left: 42px;
    line-height: 40px;
  }
  .file-item span.file-remove {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
  }
  .file-item span.file-remove:before {
    content: 'X';
    position: absolute;
    top: -10px;
    left: 5px;
  }
  input:first-of-type {
    display: inline-block;
    opacity: 0;
    position: relative;
    z-index: 999;
    width: 100px;
    height: 40px;
    cursor: pointer;
  }
  .hideButton {
    display: none;
  }
}
.my-send-wrap {
  padding: 20px;
  min-height: 100%;
  background: #fff;
  .sick-type {
    margin-right: 20px;
    span {
      color: #38f;
    }
  }

  .shenheren,
  .zhihuiren {
    > ul {
      max-width: 600px;
      zoom: 1;
      &::after {
        content: '';
        display: block;
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden;
      }
      li:last-of-type {
        margin-right: 0;
      }
      li {
        float: left;
        position: relative;
        margin-right: 60px;
        .blue {
          background-color: #38f;
        }
        > div {
          background-color: #c0c0c0;
          height: 50px;
          width: 50px;
          line-height: 50px;
          border-radius: 50%;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
        > span {
          color: #c0c0c0;
          position: absolute;
          left: 120%;
          top: 0;
          font-size: 35px;
          font-weight: 900;
        }

        > p {
          text-align: center;
        }
      }
    }
  }

  .zhihuiren {
    overflow: hidden;
    max-width: 620px;
    li {
      float: left;
      position: relative;
      margin: 0 20px 20px 0;
      .blue {
        background-color: #38f;
      }
      div {
        background-color: #c0c0c0;
        height: 50px;
        width: 50px;
        line-height: 50px;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }
      span {
        color: #c0c0c0;
        position: absolute;
        left: 120%;
        top: 0;
        font-size: 35px;
        font-weight: 900;
      }

      p {
        text-align: center;
      }
    }
  }

  .dialog {
    overflow-x: hidden;
    .dialog-title {
      display: inline-block;
      text-align: center;
      color: #999;
      font-size: 17px;
      position: relative;
      left: 50%;
      top: -1px;
      transform: translateX(-50%);
    }

    .body {
      margin-top: 15px;
      ::-webkit-scrollbar {
        width: 4px;
      }
      ::-webkit-scrollbar-track {
        background-color: #bee1eb;
      }
      ::-webkit-scrollbar-thumb {
        background-color: #00aff0;
      }
      ::-webkit-scrollbar-thumb:active {
        background-color: #00aff0;
      }

      .body-left,
      .body-right {
        padding-left: 20px;
      }
      .body-left {
        height: 380px;
        max-height: 380px;
        overflow-y: auto;
        .checkbox {
          padding: 10px 0 0 10px;
        }
        .mianbao {
          padding: 14px 0 14px 14px;
          position: relative;
          margin-left: 2px;
          color: #333;
          font-size: 14px;
          overflow: hidden;
          &::after {
            content: '';
            position: absolute;
            left: -6px;
            bottom: 6px;
            height: 1px;
            width: 95%;
            background: #f1f1f1;
          }
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 14px;
            transform: translateY(-50%);
            background: #38f;
          }
          span {
            float: left;
            margin: 12px 8px 0 8px;
            color: #999;
            font-size: 12px;
            transform: scale(0.7);
          }
          p {
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            max-width: 100px;
          }
          p:first-of-type {
            cursor: pointer;
          }

          p:last-of-type {
            color: #38f;
          }
        }

        .bumen {
          width: 92%;

          & > p {
            padding: 8px 4px;
            cursor: pointer;
            span:first-of-type {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              max-width: 210px;
              display: inline-block;
            }
            span:last-of-type {
              color: #999;
              transform: scale(0.7);
              float: right;
              margin-top: 4px;
            }
          }
        }
        .body-left-people {
          margin-top: 20px;
          padding-right: 100px;
          font-size: 15px;
          & > div {
            margin-top: 10px;
            color: #999999;
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            > span {
              font-weight: 500;
            }
          }
        }

        .show-all {
          font-size: 13px;
          margin: 30px 0 0 10px;
          color: #999;
          cursor: pointer;
          margin-bottom: 20px;
        }

        .body-left-title {
          margin-top: 30px;
        }
      }

      .body-right {
        height: 360px;
        max-height: 360px;
        overflow-y: auto;
        .body-right-content {
          & > div {
            margin-top: 20px;

            & > div:first-of-type {
              color: #333;
              float: left;
              width: 50%;
              span {
                color: #999;
                margin-left: 6px;
              }
            }

            & > div:last-of-type {
              float: right;
              width: 40px;
              color: #00aff0;
              cursor: pointer;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .dialog-footer {
    position: relative;
    left: 100%;
    transform: translateX(-50%);
    width: 320px;
  }
}
</style>
